<template>
  <div class="search-panel">
    <el-row class="m-header-searchbar">
      <el-col class="left">
        <img src="//s0.meituan.net/bs/fe-web-meituan/fa5f0f0/img/logo.png" alt />
      </el-col>
      <el-col class="center">
        <div class="wrapper">
          <el-input
            placeholder="搜索商家或者地点"
            @focus="searchFocus"
            @blur="searchBlur"
            @input="searchInput"
            v-model="search"
          />
          <button class="el-button el-button--primary">
            <i class="el-icon-search" />
          </button>
          <dl class="hotPlace" v-if="isHotPlace">
            <dt>热门搜索</dt>
            <dd v-for="v in hotPlace" :key="v.name">
              <a :href="`/products?keyword=${encodeURIComponent(v.name)}`">{{v.name}}</a>
            </dd>
          </dl>
          <dl class="searchList" v-if="isSearchList" >
            <dd v-for="v in searchList" :key="v.name">
              <a :href="`/products?keyword=${encodeURIComponent(v.name)}`">{{v.name}}</a>
            </dd>
          </dl>
        </div>
        <p class="suggest">
          <a  v-for="v in hotPlace" :href="`/products?keyword=${encodeURIComponent(v.name)}`" :key="v.name">{{v.name}}</a>
        </p>
        <ul class="nav">
          <li>
            <nuxt-link to="/" class="takeout">美团外卖</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="movie">猫眼电影</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="hotel">美团酒店</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="apartment">民宿/公寓</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="business">商家入驻</nuxt-link>
          </li>
          <li>
            <nuxt-link to="/" class="gongyi">美团公益</nuxt-link>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFocus: false,
      search: "",
      searchList: []
    };
  },
  methods: {
    searchFocus() {
      let self = this
      setTimeout(() => {
        self.isFocus = true
      }, 200)
    },
    searchBlur() {
      let self = this;
      setTimeout(() => {
        self.isFocus = false
      }, 200);
    },
    async searchInput() {
      let {status, data} = await this.$store.dispatch('api/searchByKeywords', {
        city: this.$store.state.api.position.city,
        keyword: this.search
      })
      if (status === 200 && data.code === 0) {
        this.searchList = data.pois.slice(0, 10)
      }
    }
  },
  computed: {
    isHotPlace() {
      return this.isFocus && !this.search
    },
    isSearchList() {
      return this.isFocus && this.search
    },
    hotPlace() {
      return this.$store.state.api.hotPlace.slice(0, 4)
    }
  }
};
</script>